<template>
  <div>
    <customTitle :is-line="true" bg-color="#3795ff" title="评分明细" />
    <div class="listInner">
      <div class="common_list">
        <div v-for="(item, index) in listData" :key="index" class="list_item">
          <div class="content_area">
            <div class="right_content">
              <div class="content_title" style="max-width: 100%">
                {{ item.name }}
                <i v-if="item.name === '最终得分'" class="iconfont text-primary" style="font-size: 0.48rem" @click="show1 = true">&#xe70f;</i>
              </div>
              <ul>
                <li>
                  <i class="iconfont c-text-primary">&#xe727;</i>
                  <div class="label">得分：</div>
                  <div class="value">{{ item.score }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <customTitle :is-line="true" bg-color="#3795ff" title="评分明细" />
        <!--        <custom-radio-tag1 class="mb-1 w-100" :list="scoreTabsList" :value="activeIndex" is-scroll @change="tagChange" />-->
        <van-collapse v-model="activeNameItem" class="pfmx-box">
          <van-collapse-item
            v-for="(item, index) in infoScoreData"
            :key="index"
            :name="index"
          >
            <template #title>
              <div class="d-flex w-100">
                {{ item['classaIndexName'] }}
                <span class="text-left ml-auto" style="width:80px">分值：{{ item['classaScore'] }}</span>
                <!-- <span>得分：{{ getSumHandler(item.list.map(pol => pol['companyScore'])) }}</span> -->
                <span class="text-left" style="width:80px">扣分：{{ item.customTotalScroe }}</span>
              </div>
            </template>
            <div class="listInner">
              <div class="common_list">
                <div class="list_item">
                  <div class="content_area">
                    <div class="right_content">
                      <template v-for="(people,index) in item.list">
                        <div :key="index" class="right_content_title" style="max-width: 100%">
                          <span class="right_content_title_span">{{ people['classbIndexName'] }} {{ people['classcIndexName'] ? ' - ' : '' }} {{ people['classcIndexName'] }}</span>
                          <div>
                            <span>分值：{{ people.classcScore ? people.classcScore : people.classbScore }}</span>
                            <span>扣分：{{ people.score }}</span>
                          </div>
                        </div>
                        <template>
                          <div style="font-size: 14px">
                            {{ people['scoringCriteria'] }}
                          </div>
                          <div style="color: dodgerblue">
                            {{ people['scoreNote'] }}
                          </div>
                        </template>
                      </template>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-collapse-item>
        </van-collapse>
      </div>
    </div>
    <van-collapse v-model="activeNames">
      <van-collapse-item v-for="(item,index) in detailData" :key="item.oneIndexName + index" :title="`${index + 1}、${item.oneIndexName}（${item.oneIndexScore}分）`" :name="item.oneIndexName + index">
        <div class="listInner">
          <div class="common_list">
            <div v-for="(it, ind) in item.children" :key="it.twoIndexName + index + '' + ind" class="list_item">
              <div class="content_area">
                <div class="right_content">
                  <div class="content_title" style="max-width: 100%">
                    {{ it.twoIndexName }}
                    <div class="font-weight-normal">
                      <div class="label d-inline-block">得分：</div>
                      <div class="value d-inline-block">{{ it.score }}</div>
                    </div>
                  </div>
                  <ul>
                    <li>
                      <div class="label">评分标准：</div>
                      <div class="value">{{ it.examStandard }}</div>
                    </li>
                    <li>
                      <div class="label">扣分情况：</div>
                      <div class="value">{{ it.reduceScoreMsg?it.reduceScoreMsg:'/' }}</div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-collapse-item>
    </van-collapse>
    <van-popup
      v-model="show1"
      get-container="body"
      position="right"
      :style="{ width: '100%', height: '100%', backgroundColor: '#e6edf5' }"
      closeable
      close-icon="arrow-left"
      close-icon-position="top-left"
      lock-scroll
      safe-area-inset-bottom
      close-on-popstate
      class="custom-van-pop"
    >
      <div class="pop-title">最终得分说明</div>
      <div class="pop-vertical-flex" style="height:calc(100% - 1.2rem)">
        <div class="pop-content">
          <customTitle :is-line="true" bg-color="#3795ff" title="最终得分说明 " />
          <h2 class="scoreInfo">最终得分 = 系统自动评分得分（{{ params.score }}）+ 集团赋分（{{ scoreData.groupAddScore }}）= {{ scoreData.groupAddScore==='/' || scoreData.groupAddScore==='' ? params.score : parseInt(params.score) + parseInt(scoreData.groupAddScore) }}</h2>
          <div class="listInner">
            <div class="common_list">
              <div class="list_item">
                <div class="content_area">
                  <div class="right_content">
                    <div class="content_title" style="max-width: 100%">
                      1、系统自动评分得分
                    </div>
                    <ul>
                      <li>
                        <div class="label">企业名称：</div>
                        <div class="value">{{ params.companyName }}</div>
                      </li>
                      <li>
                        <div class="label">得分：</div>
                        <div class="value">{{ params.score }}</div>
                      </li>
                      <li>
                        <div class="label">评分时间：</div>
                        <div class="value">{{ params.scoringTime }}</div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="list_item">
                <div class="content_area">
                  <div class="right_content">
                    <div class="content_title" style="max-width: 100%">
                      2、集团赋分
                    </div>
                    <ul>
                      <li>
                        <div class="label">集团赋分：</div>
                        <div class="value">{{ scoreData.groupAddScore ==='' || scoreData.groupAddScore ==='/' ? '未赋分' : scoreData.groupAddScore }}</div>
                      </li>
                      <li v-if="scoreData.groupAddScore!=='' && scoreData.groupAddScore!=='/'">
                        <div class="label">赋分原因：</div>
                        <div class="value">{{ scoreData.groupAddReason }}</div>
                      </li>
                      <li v-if="scoreData.groupAddScore!=='' && scoreData.groupAddScore!=='/'">
                        <div class="label">附件：</div>
                        <div class="value"><el-link type="primary" @click="openAttachPopUp(scoreData.attachMents)">查看</el-link></div>
                      </li>
                      <li v-if="scoreData.groupAddScore!=='' && scoreData.groupAddScore!=='/'">
                        <div class="label">赋分时间：</div>
                        <div class="value">{{ scoreData.groupAddTime }}</div>
                      </li>
                      <li v-if="scoreData.groupAddScore!=='' && scoreData.groupAddScore!=='/'">
                        <div v-if="scoreData.groupAddScore!=='' && scoreData.groupAddScore!=='/'" class="label">操作人：</div>
                        <div class="value">{{ scoreData.operatePerson }}</div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <attachPopUp ref="attachPopUp" />
  </div>
</template>

<script>
import commonList from '@/assets/mixin/commonList'
import { pagePort } from './config.js'
import { transformDataListMethods } from '@/utils'

export default {
  name: 'Score',
  mixins: [commonList],
  inject: ['layout'],
  props: {
    params: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      detailData: [],
      listData: [
        { name: '系统自动评分得分', deductMark: '/', score: this.params.score },
        { name: '最终得分', deductMark: '/', score: '' }
      ],
      infoData: [
        { name: '①企业信息维护（1分）', standard: '每家企业固定赋分（无扣分项）', deductMark: '-', score: 1 },
        { name: '②人员信息维护（8分）', standard: '人员证书过期：每一人扣0.5分', deductMark: '2人证书过期，扣1分', score: 1 },
        { name: '③ 制度文档信息维护（4分）', standard: '人制度缺项，每一项扣0.5分，直至扣满', deductMark: '-', score: 1 }
      ],
      activeNames: ['1'],
      activeNameItem: [],
      show1: false,
      scoreData: {},
      infoScoreData: [],
      activeIndex: 0,
      scoreTabsList: [
        {
          label: '查看全部'
        },
        {
          label: '查看扣分项'
        }
      ]
    }
  },
  computed: {
    configField() {
      return `${this.$route.query.current}`
    },
    getPort() {
      return pagePort[this.configField] ?? false
    }
  },
  mounted() {
    this.ScoreListPost('1')
  },
  methods: {
    getSumHandler(arr) {
      return arr.reduce((acc, curr) => {
        if (typeof curr === 'number') {
          return acc + curr
        } else {
          return acc
        }
      }, 0)
    },
    tagChange(tagArg) {
      const { label } = tagArg.item
      label === '查看全部' ? this.ScoreListPost('-1') : this.ScoreListPost('1')
    },
    // 评分明细列表
    async ScoreListPost(viewType) {
      this.layout.showAreaLoading(['.pfmx-box'])
      if (this.getPort && this.getPort.ScoreListPost) {
        const { status, data } = await this.getPort.ScoreListPost({
          companyId: this.params.companyId,
          scoreTime: this.params.scoringTime,
          viewType: viewType
        })
        if (status === 0 && data) {
          this.listData.forEach(v => {
            if (v.name === '最终得分') {
              v.score = data.totalScore
            }
          })
          // this.detailData = data
          this.FinallyScorePost(data.overallId)
          // 合并一级指标
          this.infoScoreData = transformDataListMethods(data['compareScoreDetails']).map(v => {
            // console.log(this.getSumHandler(v.list.map(pol => pol['companyScore'])))
            let kScore = 0
            v.list.forEach(z => {
              if (z.score !== '') {
                kScore += z.score
              }
            })
            return {
              ...v,
              customTotalScroe: kScore
            }
          })
          this.activeNameItem = this.infoScoreData.map((item, index) => index)
          console.log(this.infoScoreData)
        }
      }
      this.layout.hideAreaLoading(['.pfmx-box'])
    },
    // 最终得分说明
    async FinallyScorePost(overAllId) {
      if (this.getPort && this.getPort.FinallyScorePost) {
        const { status, data } = await this.getPort.FinallyScorePost({
          overAllId: overAllId
        })
        if (status === 0 && data) {
          this.scoreData = data
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-van-pop {
  background: url("~@/assets/images/wapper.png") no-repeat;
  .pop-title {
    color: #fff;
    text-align: center;
    height: 1.2rem;
    line-height: 1.2rem;
    font-size: 0.46667rem;
    font-weight: bold;
  }
  .pop-content {
    background-color: #fff;
    margin: 0 0.25rem ;
  }
  ::v-deep .van-popup__close-icon {
    color: #fff;
  }
}
.common_list {
  padding: 0;
}
.scoreInfo {
  font-size: 0.373rem;
  line-height: 0.533rem;
  font-weight: bold;
  margin-bottom: 0.267rem;
}
::v-deep .van-cell__title {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  div:nth-child(2) {
    margin-right: 15px;
    span:nth-child(2) {
      margin-left: 15px;
    }
  }
}
::v-deep .van-collapse-item__content {
  padding: 12px 0 !important;
}
::v-deep .van-collapse-item__wrapper {
  border: none !important;
}
.right_content {
  div:nth-child(1) {
    margin-top: 0;
  }
  .right_content_title {
    font-family: MicrosoftYaHei-Bold;
    margin-top: 24px;
    font-weight: bold;
    font-size: 28px;
    color: #000000;
    width: 100%;
    min-height: 80px;
    background-color: #EBF0F6;
    padding: 10px 12px;
    box-sizing: border-box;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &_span {
      display: inline-block;
      width: 38vw;
    }
    div {
      margin-right: 15px;
      span:nth-child(2) {
        margin-left: 30px;
      }
    }
  }
}
</style>
